<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>关于我们</h3>
			<el-form ref="dataForm" :model="dataForm" label-width="150px">
				<el-form-item label="图片">
					<el-upload :action="uploadPath" :show-file-list="false" :on-success="uploadSuccessHandle"
					           :before-upload="onBeforeUpload" class="avatar-uploader" accept=".jpg, .jpeg, .png, .gif">
						<img v-if="dataForm.picture" :src="dataForm.picture" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"/>
					</el-upload>
				</el-form-item>
				<el-form-item label="电话">
					<el-input v-model="dataForm.telephone"/>
				</el-form-item>

				<div class="op-container">
					<el-button v-permission="[1]" type="primary" @click="handleEdit">保存更改</el-button>
				</div>
			</el-form>
		</el-card>
	</div>
</template>

<script>

	import {customPhone, updateAboutUs, updatePhone} from '@/api/admin'
	import {uploadPath} from '@/api/storage'

	export default {
		name: 'about',
		data() {
			return {
				uploadPath,
				dataForm: {
					picture: undefined,
					telephone: undefined
				},
			}
		},
		created() {
			this.loadData()
		},
		methods: {
			loadData() {
				customPhone()
					.then(res => {
						this.dataForm.telephone = res.data.data
					})
			},
			handleEdit() {
				if (this.dataForm.picture) {
					updateAboutUs(this.dataForm.picture)
						.then(res => {
							this.$notify.success({
								title: '成功',
								message: '更改成功'
							})
						})
						.catch(res => {
							this.$notify.error({
								title: '失败',
								message: res
							})
						})
				}
				if (this.dataForm.telephone) {
					updatePhone(this.dataForm.telephone)
						.then(res => {
							this.$notify.success({
								title: '成功',
								message: '更改成功'
							})
						})
						.catch(res => {
							this.$notify.error({
								title: '失败',
								message: res
							})
						})
				}
			},
			// 上传图片了处理图片
			uploadSuccessHandle(e) {
				this.dataForm.picture = e.data.photos
			},
			onBeforeUpload(file) {
				const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
				const isLt1M = file.size / 1024 / 1024 < 1

				if (!isIMAGE) {
					this.$message.error('上传文件只能是图片格式!')
				}
				if (!isLt1M) {
					this.$message.error('上传文件大小不能超过 1MB!')
				}
				return isIMAGE && isLt1M
			}
		}
	}
</script>
<style>
	.el-tag + .el-tag {
		margin-left: 10px;
	}

	.op-container {
		text-align: right;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #20a0ff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 120px;
		height: 120px;
		line-height: 120px;
		text-align: center;
	}

	.avatar {
		width: 145px;
		height: 145px;
		display: block;
	}
</style>
